<template>
  <div class="serverdown">
    <h1>Windows Server 下载</h1>
    <div class="tit">
      Windows Server专为教师开放下载，提供实验，科研计算环境。
    </div>
    <div class="content">
      <div class="soft-content" v-if="data.length > 0">
        <div class="item" v-for="(item, index) in data" :key="index">
          <img :src="item.pictureUrl" />
          <div class="item-content">
            <div class="item-content-left">
              <div class="title">{{ item.name }}</div>
              <div class="text">{{ item.notes }}</div>
            </div>
            <div class="item-content-right">
              <div class="text">
                <p class="txt">日期：{{ item.issueDate | formatDate('yyyy-M-d') }}</p>
                <p class="txt">大小：{{ item.size }}</p>

              </div>
              <div class="detail"><a href="javascript:void(0)" @click="goLink(item.id)">详细信息</a>
                <SoftBtn :item="item"></SoftBtn>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="item" v-for="(item,index) in data" :key="index"  @click="goLink(item.id)">
          <img :src="item.pictureUrl" />
          <p class="itemTitle">{{ item.name }}</p>
          <p class="txt">大小：{{ item.size }}</p>
          <p class="txt">版本：{{ item.version }}</p>
        </div> -->

      </div>
      <!-- <el-pagination
    layout="prev, pager, next"
    @current-change="handleCurrentChange"
    :current-page="number"
    :page-size="10"
    :total="total">
  </el-pagination> -->
    </div>
    <Dialog :dialogVisible="softVisible" :id="id" @cancel="cancel" @handleClose="handleClose" @confirm="confirm"></Dialog>
  </div>
</template>
<script>
import SoftBtn from '@/components/softBtn'
import Dialog from "@/components/dialog.vue"
import { gettechersoft } from "@/api/index"
export default {
  components: {
    Dialog,
    SoftBtn
  },
  data() {
    return {
      softVisible: false,
      id: '',
      dataNav: [],
      current_node_key: [],
      ids: [],
      data: [],
      number: 1,
      total: 5,
    }
  },
  methods: {
    goLink(id) {

      this.softVisible = true,
        this.id = id
    },

    handeNav(id) {
      this.id = id

    },
    handleCurrentChange(value) {
      this.number = value
      this.getdata()
    },
    getdata() {
      gettechersoft(this.number).then(res => {
        console.log(res)
        this.data = res.data.softwares
      }).catch((err) => {
        console.log(err)
        this.$message({
          message: err.response.data.msg,
          type: 'info'
        })
      })

      //  getsoftwareenable
    },
    cancel() {
      this.softVisible = false;
      this.id = ''
    },
    // 关闭对话框
    handleClose() {
      this.softVisible = false;
      this.id = ''
    },
    confirm(value) {
      console.log(value)
    },

  },
  mounted() {
    this.getdata()
    // this.get()
    // this.getdata()

  }
};
</script>
<style lang="less" scoped>
.serverdown {
  width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  min-height: 600px;

  h1 {
    font-family: 'MicrosoftYaHei-Bold';
    font-weight: bold;
    font-size: 26px;
    color: rgba(56, 23, 129, 1);
  }

  .tit {
    margin-top: 20px;
    background: #E9ECEF;
    height: 90px;
    width: 100%;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 15px 30px;
    font-size: 16px;
    color: rgba(56, 23, 129, 1);
  }

  .content {
    .soft-content {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      //  background: #f8f8f8;
      padding-top: 5px;
      flex-wrap: wrap;
      height: max-content;
      border-radius: 6px;
      padding-left: 11px;
      justify-content: center;

      .item {
        margin: 10px 11px;
        width: 648px;
        padding: 10px;
        text-align: center;
        height: 80px;
        background: #fff;
        border-radius: 4px;
        border-top: solid 1px #0086FB;
        border-bottom: solid 1px #0086FB;
        border-right: solid 1px #0086FB;
        border-left: solid 5px #007BFA;
        box-sizing: border-box;
        box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.2);
        display: flex;

        cursor: pointer;

        &:hover {
          box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.5);
        }

        img {
          width: 43px;
          height: 43px;
          margin-right: 20px;
        }

        .item-content {
          display: flex;
          width: 100%;
          justify-content: space-between;

          .item-content-left {
            text-align: left;

            .title {
              font-size: 14px;
              font-weight: bold;
              font-family: 'MicrosoftYaHei-Bold';
              color: rgba(35, 125, 210, 1);
            }

            .text {
              font-family: 'MicrosoftYaHei';
              font-weight: 400;
              font-size: 11px;
              color: rgba(118, 118, 118, 1);
              display: -webkit-box !important;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
          }

          .item-content-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            .text {
              display: flex;
              white-space: nowrap;

              .txt {
                margin-left: 15px;
              }
            }

            .detail {
              display: flex;
              align-items: flex-end;

              a {
                font-family: 'MicrosoftYaHei-Bold';
                font-weight: bold;
                font-size: 11px;
                color: rgba(0, 123, 250, 1);
                margin-right: 30px;
                margin-bottom: 5px;
                white-space: nowrap;
              }
            }
          }

        }

        .txt {
          font-size: 12px;
          padding-bottom: 8px;
          color: rgba(95, 95, 95, 1);
        }
      }
    }
  }

}</style>